<template>
  <div class="jurisdiction">
    <el-tree
      style="max-width: 100%"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="[]"
      :props="defaultProps"
      @check-change="handleClick"
    />

    <el-button type="primary" @click="handleCommit">确认</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultProps = ref({
  children: 'children',
  label: 'label'
})

const data = ref([
  {
    id: 1,
    label: '页面1',
    isparent: false
  },
  {
    id: 2,
    label: '页面2',
    isparent: false
  },
  {
    id: 3,
    label: '页面3',
    isparent: false
  },
  {
    id: 4,
    label: '页面4',
    isparent: true,
    children: [
      {
        id: 5,
        label: '页面4_1',
        isparent: false
      },
      {
        id: 6,
        label: '页面4_2',
        isparent: false
      }
    ],
  }
])

const selectArr = ref(<any>[])

const handleClick = (node:any, isSlected:any) => {
  if (!node.isparent && isSlected) {
    selectArr.value.push(node)
  }

  if (!node.isparent && !isSlected) {
    const index = selectArr.value.findIndex((i:any) => {
      return i.id === node.id
    })
    selectArr.value.splice(index, 1)
  }
}

const handleCommit = () => {
  console.log(selectArr.value)
}
</script>

<style scoped lang="scss"></style>